<template>
  <div>
    <div>
      <el-button type="primary" style="margin: 10px 10px" @click="showaddView"
        >添加房型</el-button
      >
      <el-table
        ref="singleTable"
        :data="roomtypeData"
        stripe
        height="370"
        style="width: 80%"
        v-loading="loading"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="roomTypeId" label="房型ID" width="180">
        </el-table-column>
        <el-table-column prop="roomTypeNo" label="房型编号" width="180">
        </el-table-column>
        <el-table-column prop="roomTypeName" label="房型名称">
        </el-table-column>
        <el-table-column prop="roomTypeBed" label="床位数"> </el-table-column>
        <el-table-column prop="roomTypePrice" label="房型价格">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              :disabled="flag"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="flag"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="编辑房型" :visible.sync="dialogeditVisible" width="30%">
      <div>
        <el-tag style="margin-right: 10px">房型编号</el-tag>
        <el-input v-model="editform.roomTypeNo" style="width: 250px"></el-input>
        <br />
        <el-tag style="margin-right: 10px">房型名称</el-tag>
        <el-input
          v-model="editform.roomTypeName"
          style="width: 250px"
        ></el-input>
        <br />
        <el-tag style="margin-right: 10px">房型价格</el-tag>
        <el-input
          v-model="editform.roomTypePrice"
          style="width: 250px"
        ></el-input>
        <br />
        <el-tag style="margin-right: 10px">床位数量</el-tag>
        <el-input
          v-model="editform.roomTypeBed"
          style="width: 250px"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogeditVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="Updateroomtype"
          @keydown.enter.native="Updateroomtype"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="添加房型" :visible.sync="dialogaddVisible" width="30%">
      <div>
        <el-tag style="margin-right: 10px">房型编号</el-tag>
        <el-input v-model="editform.roomTypeNo" style="width: 250px"></el-input>
        <br />
        <el-tag style="margin-right: 10px">房型名称</el-tag>
        <el-input
          v-model="editform.roomTypeName"
          style="width: 250px"
        ></el-input>
        <br />
        <el-tag style="margin-right: 10px">床位数量</el-tag>
        <el-input
          v-model="editform.roomTypeBed"
          style="width: 250px"
        ></el-input>
        <br />
        <el-tag style="margin-right: 10px">房型价格</el-tag>
        <el-input
          v-model="editform.roomTypePrice"
          style="width: 250px"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addroomtypeName"
          @keydown.enter.native="addroomtypeName"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoomtype,
  addRoomtype,
  deleteRoomtype,
  editRoomtype
} from "@/api/roomtype";
export default {
  name: "Roomtype",
  data() {
    return {
      flag: false,
      currentRow: null,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 类型表格数据
      roomtypeData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        roomTypeId: undefined,
        roomTypeName: undefined,
        roomTypeNo: undefined,
        roomTypeBed: undefined,
        roomTypePrice: undefined
      },
      // 添加表单参数
      form: {},
      //修改参数
      editform: {
        roomTypeId: undefined,
        roomTypeName: undefined,
        roomTypeNo: undefined,
        roomTypeBed: undefined,
        roomTypePrice: undefined
      },
      dialogeditVisible: false,
      dialogaddVisible: false
    };
  },
  mounted() {
    this.initroomtypeData();
    this.checkuserInfo();
  },
  methods: {
    checkuserInfo() {
      if (this.$store.state.userName == "user") {
        this.flag = true;
        console.log(this.flag);
      } else if (this.$store.state.userName == "admin") {
        this.flag = false;
        console.log(this.flag);
      }
    },
    //重置表格
    resetform() {
      this.editform = {
        roomTypeName: undefined,
        roomTypeNo: undefined,
        roomTypeBed: undefined
      };
    },
    //添加房型
    showaddView() {
      this.dialogaddVisible = true;
      this.resetform();
    },
    addroomtypeName() {
      if (
        typeof this.editform.roomTypeName === "undefined" ||
        typeof this.editform.roomTypeNo === "undefined" ||
        typeof this.editform.roomTypeBed === "undefined" ||
        typeof this.editform.roomTypePrice === "undefined"
      ) {
        console.log(this.editform);
        console.log(this.resp);
        this.$message.error("请输入完整房型信息！");
      } else {
        addRoomtype(this.editform)
          .then(resp => {
            if (resp) {
              this.initroomtypeData();
              console.log(resp.data);
              if (resp.data.code == "200") {
                this.$message.success(resp.data);
              } else {
                this.$message.error(resp.data);
              }
            }
            this.dialogaddVisible = false;
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      }
      this.resetform();
    },
    //删除房型
    handleDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' + row.roomTypeName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          deleteRoomtype(row.roomTypeId)
            .then(resp => {
              if (resp) {
                this.initroomtypeData();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              } else {
                this.$message({
                  type: "info",
                  message: "删除失败!"
                });
              }
            })
            .catch(error => {
              // 错误分为 status-请求错误 和 code-账号密码错误
              this.$message.error(error);
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //处理修改房型对话框
    handleEdit(row) {
      this.dialogeditVisible = true;
      Object.assign(this.editform, row);
    },
    //修改房型
    Updateroomtype() {
      console.log(this.editform);
      editRoomtype(this.editform)
        .then(resp => {
          if (resp) {
            if (resp.data.code == "200") {
              this.$message.success(resp.data);
            } else {
              this.$message.error(resp.data);
            }
          } else {
            this.$message({
              type: "info",
              message: "修改失败!"
            });
          }
          this.resetform();
          this.initroomtypeData();
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.dialogeditVisible = false;
    },
    //房型列表数据
    initroomtypeData() {
      this.loading = true;
      listRoomtype(this.queryParams)
        .then(resp => {
          if (resp.data.code == "200") {
            this.roomtypeData = resp.data.data; //api读取数据
            // console.log(resp.data);
          }
          this.loading = false;
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    }
  }
};
</script>

<style></style>
